<template>
  <div id="app">
    <router-view/>
      <!-- 用户信息详情 -->
      <el-dialog  :visible.sync="isShows" width="40%" append-to-body :close-on-click-modal="false">
        <div>
      <div>
       <el-descriptions title="用户信息" class="margin-top"  :column="3" border >
        <el-descriptions-item>
      <template slot="label">
        用户头像
      </template>
      <ImagePreview class="image-preview" :src="String(userInfomationList.memberUserPhoto)"/>
    </el-descriptions-item>
        <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        用户名
      </template>
      <span class="tooltip-text">{{ userInfomationList.memberUserRealName }}</span>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        手机号
      </template>
      {{userInfomationList.memberUserPhone}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        年龄
      </template>
      {{userInfomationList.memberUserAge}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        性别
      </template>
      {{ userInfomationList.memberUserSex === 0 ? '男' : '女' }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        身高
      </template>
      {{userInfomationList.memberUserHeight === 0 ? "暂无数据" : userInfomationList.memberUserHeight+"cm" }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        体重
      </template>
      {{userInfomationList.memberUserWeight === 0.00 ?  "暂无数据" : userInfomationList.memberUserWeight+"kg"}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        体脂率
      </template>
      {{userInfomationList.memberUserBodyFat=== 0.00 ? '暂无数据' : userInfomationList.memberUserBodyFat+"%"}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        开通时间
      </template>
      {{ userInfomationList.createTime }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        教练
      </template>
      {{ userInfomationList.invitationCode  === null ||userInfomationList.invitationCode  === "null"? '暂无' : userInfomationList.coachName }}
    </el-descriptions-item>
      </el-descriptions>
    </div>
    <div style="margin-top: 30px;">
      <el-descriptions title="会员信息"   :column="3"  border >
        <el-descriptions-item>
      <template slot="label">
        会员卡卡号
      </template>
      {{userInfomationList.membershipCardNumber === null ||userInfomationList.membershipCardNumber === '' ? '暂未绑定' : userInfomationList.membershipCardNumber }}
    </el-descriptions-item>
        <el-descriptions-item>
      <template slot="label">
        会员类型
      </template>
      {{userInfomationList.memberType === 0 ? '次卡' : '期限卡'}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        会员卡名称
      </template>
      {{userInfomationList.memberTypeName }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        {{userInfomationList.memberType === 0 ? '可用次数' : '到期时间'}}
      </template>
      {{userInfomationList.memberType === 0 ? userInfomationList.availableTimes+ '次' : userInfomationList.expirationTime}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        会员备注
      </template>
      {{userInfomationList.memberTypeRemarks}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        今日刷卡次数
      </template>
      {{userInfomationList.cardNumber }}
    </el-descriptions-item>
      </el-descriptions>
    </div>
     <!-- 预约信息部分 -->
     <div style="margin-top: 30px;">
      <div>
      <h3 style="font-weight: bolder;">预约信息</h3>
    </div>
      <div v-if="!reservationList || !reservationList.length" style="margin-top: 10px;">
        暂无预约
      </div>
      <div v-else>
        <el-table :data="reservationList" stripe border>
          <el-table-column label="预约时间" >
            <template slot-scope="scope">
                  {{ scope.row.reservationTime }} {{ scope.row.trainingTime }}
            </template>
          </el-table-column>
          <el-table-column label="预约教练" prop="coachName"></el-table-column>
          <el-table-column label="预约课程" prop="fitnessPlanName"></el-table-column>
          <el-table-column label="预约状态" prop="reservationStatus">
            <template slot-scope="scope">
      <span v-if="scope.row.reservationStatus === '0'">待预约</span>
      <span v-else-if="scope.row.reservationStatus === '1'">待训练</span>
      <span v-else-if="scope.row.reservationStatus === '2'">进行中</span>
      <span v-else-if="scope.row.reservationStatus === '3'">已完成</span>
    </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
     <div class="button-container" style="margin-top: 10px;text-align: right;">
          <el-button type="primary" @click="cancell">确定</el-button>
      </div>
    </div>
     </el-dialog>
    <theme-picker />
  </div>
</template>

<script>
import { getByInvitationCode,deleteNumberTimes} from "@/api/memberUser/index";
import ThemePicker from "@/components/ThemePicker";
import websocket from '@/js/websocket'
export default {
  name: "App",
  components: { ThemePicker },
  data(){
    return{
      reservationList:[],
      userInfomationList:{
        teacherName:''
      },
      isShows: false,
      isWebSocketReady: false
    }
  },
  metaInfo() {
      return {
          title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
          titleTemplate: title => {
              return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
          }
      }
  },
  mounted() {


  },
  created(){


  },
  methods:{


    // 详情确认按钮
    cancell () {
      if(this.userInfomationList.memberType === 0){
        const memberUserPhone = this.userInfomationList.memberUserPhone
        const venueUniqueIdentifier =sessionStorage.getItem('venueUniqueIdentifier')
        deleteNumberTimes(memberUserPhone,venueUniqueIdentifier).then((res) => {
          this.isShows = false
      this.userInfomationList={}

        })
      }else{
        this.isShows = false
      this.userInfomationList={}

      }

    },
    reconnectWebSocket() {
    const clientId = "";
    websocket.Init(clientId);
  },
    handleWebSocketMessage(event) {
      console.log("111111111111111111111111111111")
      console.log(event)
      // 在这里处理WebSocket消息的变化
      if(event.data){
        const data = JSON.parse(event.data); // 将接收到的数据解析为JSON对象
        console.log(data)
        if(sessionStorage.getItem('sessionObj')){
        if(sessionStorage.getItem('venueUniqueIdentifier')){
          const venueUniqueIdentifier = sessionStorage.getItem('venueUniqueIdentifier')
          if(data.venueUniqueIdentifier === venueUniqueIdentifier){
            if(localStorage.getItem('shouquan')){
              if(data.reservationList){
                this.userInfomationList=data
              this.reservationList =data.reservationList
              this.isShows = true
              }else {
                if (this.$route.path === '/member/memberUser') {
                  if(this.$root.$memberOpen === true){
                    this.$root.$membershipCardNumber =  data.membershipCardNumber
                    this.$root.$emit('membershipCardNumberChanged', this.$root.$membershipCardNumber);
                  }
                  else {
                this.isShows = false;
                this.$message.error('暂无此卡信息，请重试或联系管理员！！！');
              }
                // this.$refs.form.setValue(data);
              } else {
                this.isShows = false;
                this.$message.error('暂无此卡信息，请重试或联系管理员！！！');
              }
            }
            }
          }
        }
      }
      }
      // 其他处理逻辑...
    }
  }
};
</script>


<style lang="less">
#app .theme-picker {
  display: none;
}

/* 设置图片的最大宽度和最大高度 */
.image-preview img {
  width: 40px;
  height: 40px;
  max-width: 100%; /* 图片的最大宽度为父元素的宽度 */
  max-height: 100%; /* 图片的最大高度为父元素的高度 */
  object-fit: cover; /* 保持图片比例并填充整个容器 */
}
.tooltip-text {
  display: inline-block;
  max-width: 5em; /* 设置为最大显示5个字符的宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
.tooltip-text:hover::after {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background-color: #000;
  color: #fff;
  padding: 5px;
  border-radius: 4px;
  z-index: 999;
}
</style>
